<template>
  <div id="headerTop">
    <div class="app_name">
      <slot name="search"></slot>
      <section v-if="goBack" class="arrow_left" @click="$router.go(-1)">
        <svg
          width="100%"
          height="100%"
          xmlns="http://www.w3.org/2000/svg"
          version="1.1"
        >
          <polyline
            points="12,18 4,9 12,0"
            style="fill: none; stroke: rgb(255, 255, 255); stroke-width: 2"
          />
        </svg>
      </section>
      <span v-else-if="appName">elm.me</span>
    </div>
    <div v-if="headTitle" class="head_title">{{headTitle.length>9?headTitle.substring(0,9)+'...':headTitle}}</div>
    <div v-if="login">登录|注册</div>
    <slot name="changeCity"></slot>
  </div>
</template>

<script>
export default {
  name: "headerTop",
  props: {
    headTitle: String,
    login: {
      type: Boolean,
      default: true,
    },
    appName: {
      type: Boolean,
      default: true,
    },
    goBack: Boolean,
  },
  setup(props) {
    const a = null;
  },
};
</script>

<style lang="scss" scoped>
@import "@/style/mixin";
#headerTop {
  background-color: $blue;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  @include wh(100%, 1.95rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  div {
    padding: 0.2rem;
    @include sc(0.7rem, #fff);
  }
  .app_name {
    left: 0.4rem;
    margin-right:1rem;
    .arrow_left {
      @include wh(1rem, 1rem);
      fill: #999;
    }
  }
  .head_title {
    @include sc(0.8rem, #fff);
    font-size: 600;
  }
}
</style>
